<div class="modal modal-default fade show" id="modal-articles" ng-init="getList()">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">List of articles</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <!-- <div class="modal-body" style="height: calc(100vh - 143px);overflow-y: auto;"> -->
            <div class="modal-body">
                <section class="">
                    <filter-list request="request" callback="getList(pageIndex)"></filter-list>
                    <sio-data-table ng-init="getList()" data="data" can-drag="request.orderBy === 'Priority' && request.direction === '0'" edit-url="'/portal/permission/details'" columns="columns" child-name="'childs'" on-delete="remove(id)" on-update-infos="updateInfos(items)" on-update-child-infos="updateChildInfos(items)"></sio-data-table>
                    <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems" ul-class="pagination justify-content-end" a-class="page-link" paging-action="loadProducts(page-1)" scroll-top="true">
                    </paging>
                </section>
                <table id="list-page" class="table table-sm table-hover sortable" cellspacing="0" ng-init="getList()">
                    <thead class="thead-light">
                        <tr>
                            <th scope="col" style="width: 3%;">
                                <span class="fas fa-sort"></span>
                            </th>
                            <th scope="col" style="width: 4%;">
                                <span class="fas fa-sort-numeric-down"></span>
                            </th>
                            <th scope="col" style="width: 25%;">
                                Title
                            </th>
                            <th scope="col" width="10%">
                                Image
                            </th>

                            <th scope="col" style="width: 10%;">
                                Created By
                            </th>

                            <th scope="col" style="width: 5%;">Actions</th>
                        </tr>
                    </thead>

                    <tbody class="sortable">
                        <tr ng-repeat="item in data.items track by $index" class="sortable-item" sort-model="article" sort-model-id="{{item.id}}">
                            <td style="cursor:move;" class="drag-header">
                                <span class="fas fa-sort"></span>
                            </td>
                            <td>
                                <input type="text" value="{{item.priority}}" class="item-priority form-control form-control-sm d-inline" style="width:40px;">
                            </td>
                            <td>
                                {{item.title}}
                            </td>
                            <td>
                                <div ng-if="item.image!=''">
                                    <img height="50" ng-src="{{item.imageUrl}}">
                                </div>                                
                            </td>

                            <td>
                                {{item.createdBy}}
                            </td>

                            <td>
                                <div class="btn-group btn-group-sm btn-group-sm float-right" role="group" aria-label="Actions">
                                    <a href="/portal/article/details/{{item.id}}" class="btn btn-light">
                                        <span class="fas fa-pencil-alt text-primary"></span>
                                    </a>
                                    <a href="{{item.detailsUrl}}" target="_blank" class="btn btn-light">
                                        <span class="fas fa-eye text-info"></span>
                                    </a>

                                    <a ng-click="remove(item.categoryId,itemId);" class="btn btn-light">
                                        <span class="fas fa-times text-danger"></span>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>


            </div>
            <div class="modal-footer">

                <!-- <div class="col-md-7">
                                    <div class="col-md-12" role="toolbar" aria-label="Toolbar with button groups">
                                        <custom-file header="''" folder="'Medias'" media-file="activedData.mediaFile" data="activedData"
                                            src-url="activedData.mediaFile.fullPath" save="save(activedData)" auto="'false'" class=""></custom-file>
                                    </div>
                                </div> -->
                <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems" ul-class="pagination justify-content-end" a-class="page-link" paging-action="getList(page-1)" scroll-top="true"></paging>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
